<template>
    <div>
        <div style="width: 100%;" @click="handClick">
            <slot></slot>
        </div>
        <a-modal v-model="visible" :footer="null" width="70vw" wrapClassName="modalWraps">
            <template #title>
                <div class="templateTitleWrap">
                    <div class="templateTitleWrap-title">
                        <span>{{ detail.titleName }}</span>
                    </div>
                    <div class="templateTitleWrap-subtitle">
                        <span>山东省港口集团有限公司</span>
                        <span class="margin-left">审批编号：{{ detail.businessId }}</span>
                    </div>
                </div>
            </template>
            <div class="modalContent">
                <a-spin :spinning="loading" class="modalContent-spin">
                    <a-row>
                        <a-col :span="16" class="">
                            <a-row :gutter="[4, 12]">
                                <a-col v-for="(item, index) in detail.componentValueDataEntityList" :key="item.id"
                                    :span="colSpanF(item, index)">
                                    <ItemType :item="item" :indexNum="tempIdList.indexOf(item.id)"></ItemType>
                                </a-col>
                            </a-row>
                        </a-col>
                        <a-col :span="8">
                            <Process :list="detail.operationRecordDataEntityList" :detail="detail"></Process>
                        </a-col>
                    </a-row>
                </a-spin>
            </div>
        </a-modal>
    </div>
</template>

<script>
import ApprovalFlow from '@/components/Process/ApprovalFlow.vue';
import * as dayjs from 'dayjs';
import ShowBase from '@/components/ShowBase/ShowBase';
import ItemType from './components/ItemType';
import Process from './components/Process';

export default {
    components: {
        ApprovalFlow,
        ShowBase,
        ItemType,
        Process,
    },
    props: {
        id: {
            type: [Number, String],
            default: '',
        }
    },
    data() {
        return {
            visible: false,
            height: 821,
            detail: {},
            loading: false,
            tempIdList: [],
        };
    },
    created() { },
    methods: {
        fetchDetail(id) {
            // try {
            this.visible = true;
            this.loading = true;
            this.getAxios(this.$queryFormDataInfo, { id: id }).then((res) => {
                if (res.code == 0) {
                    let data = res.data;
                    let { ccUserNames, imgUrls, componentValueDataEntityList, operationRecordDataEntityList } =
                        data;
                    ccUserNames = JSON.parse(ccUserNames || '[]');
                    imgUrls = imgUrls || [];
                    this.detail = {
                        ...data,
                        imgUrls,
                        ccUserNames,
                        componentValueDataEntityList: componentValueDataEntityList
                            .map(item => {
                                if (item.componentType === 'DDDateRangeField') {
                                    item.name = JSON.parse(item.name).join('，');
                                    item.value = JSON.parse(item.value).slice(0, 2).join('，');
                                }
                                if (item.componentType === 'DDMultiSelectField') {
                                    item.value = JSON.parse(item.value).join('，');
                                }
                                if (item.componentType === 'DDPhotoField' || item.componentType == 'TableField') {
                                    item.value = JSON.parse(item.value);
                                }
                                if (item.componentType === 'TimeAndLocationField') {
                                    item.name = JSON.parse(item.name).join('，');
                                    const value = JSON.parse(item.value);
                                    item.value = `${value[0]}，${value[3]}`;
                                }

                                return item;
                            }),
                        operationRecordDataEntityList: operationRecordDataEntityList.map(item => {
                            if (item.type == 'PROCESS_CC' && item.ccUserNames) {
                                item.ccUserNames = JSON.parse(item.ccUserNames);
                            }
                            item.date = dayjs(item.date).format('MM-DD HH:mm');
                            return item;
                        }),
                    };
                    // 序号过滤掉文字描述字段
                    this.tempIdList = this.detail.componentValueDataEntityList.filter(v => !['TextNote'].includes(v.componentType)).map(v => v.id)
                }
            }).catch(() => {
                this.visible = false;
            }).finally(() => {
                this.loading = false;
            })
        },
        close() {
            this.visible = false;
            this.loading = false;
            setTimeout(() => {
                this.$nextTick(() => {
                    this.detail = {};
                })
            }, 500)
        },
        handClick() {
            if (this.id != '' && this.loading != true) {
                this.fetchDetail(this.id);
            }
        },
        colSpanF(info, i) {
            let res = 24;
            let type = info.componentType
            if (['TextNote', "TableField", 'DDMultiSelectField', 'TextareaField', 'DDPhotoField'].includes(type)) {
                res = 24;
            } else if (['',].includes(type)) {
                res = 12;
            }
            return res;
        }
    },
    mounted() {
    }
};
</script>

<style lang="less" scoped>
@ImportColor: '';
@SubColor: rgba(23, 26, 29, 0.6);

.modalWraps {
    .templateTitleWrap {
        display: flex;
        flex-direction: column;

        &-title {
            font-size: 20px;
            font-weight: 560;
        }

        &-subtitle {
            margin-top: 6px;
            font-size: 13px;
            color: @SubColor;
        }
    }

    .modalContent {
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;

        &-spin {
            height: 100%;
            // width: 100%;
            // display: flex;
            // justify-content: center;
            // align-items: center;
        }
    }

}

::v-deep {
    .ant-modal-header {
        padding: 12px 24px 8px;
    }

    .ant-modal-body {
        padding: 12px 24px !important;
        // background-color: #F2F2F6;
    }

}
</style>